<template>
 <div class="mainTab">
  <img src="@/assets/image/bottom.png" alt="" />
  <div class="tabBox">
    <div @click="changePage('all')">
      <img src="@/assets/image/button1Active.png" alt="" srcset="" v-if="activeName=='all'">
      <img src="@/assets/image/button1.png" alt="" srcset="" v-else>
      <span>总览</span>
    </div>
    <div @click="changePage('deliver')">
      <img src="@/assets/image/button2Active.png" alt="" srcset="" v-if="activeName=='deliver'">
      <img src="@/assets/image/button2.png" alt="" srcset="" v-else>
      <span>送达大数据</span>
    </div>
    <div @click="changePage('trial')">
      <img src="@/assets/image/button3Active.png" alt="" srcset="" v-if="activeName=='trial'">
      <img src="@/assets/image/button3.png" alt="" srcset="" v-else>
      <span>庭审大数据</span>
    </div>
  </div>
  
  
 </div>
</template>
<script>
export default {
  name: 'HeadView',
  data () {
    return {
      activeName:'all'
    }
  },
  props: {
  },
  watch:{
    // "$route"(a)
    // {
    //   console.log('urlChange')
    //   this.activeName=a.name
    // },
    '$route.name':{
      immediate:true,//一旦监听到变化立即执行
      handler(to,from){
        console.log('urlChange')
        this.activeName=to
        console.log('urlChange2',this.activeName,to)
      },
      deep:true
    }
  },  
  components: {
  },
  created () {

  },
  mounted () {
    // this.activeName=this.$route.name?this.$route.name:'all'
    
    // console.log(this.$route,1231231321)
  },
  methods: {
    changePage(name){
      this.$router.push({name:name})
    }
  }
}
</script>
<style scoped lang="postcss">
.mainTab
{

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  /* background-image: url(@/assets/image/bottom.png); */
  position: relative;
  
}
.mainTab img
{
  width: 100%;
  
}
.tabBox
{
  position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* width: 100%; */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    gap: 9px;
    width: 36%;
    
}
.tabBox>div
{
  
  /* border: 2px solid #1257C9; */
  /* border-radius: 12px; */
  /* position: relative; */
  /* height: 55px; */
  /* width: 100px; */
  /* background-image: linear-gradient(#1D6FB4FF,#18222CFF); */
  /* width: 193px; */
  position: relative;
  flex: 1.2;
  cursor: pointer;
  &:nth-child(2)
  {
    flex: 1;
  }
  font-size: 26px;
  font-weight: 400;
  color: #5EAED0;
  display: flex;
}
.tabBox>div>img
{
  width: 100%;
  display: block;
}
.tabBox>div>span
{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}
</style>


<style>
/* .head{
background-image: url('../../assets/head.png');

  background-size: 100% 100%;
     width:100vw;
     height: 78px;
     color:red;
     font-family: Regular;
} */
</style>
